<template>
  <div>
    <el-dialog :visible.sync="dialogStatus" :title="$t('configLazyLoad.channel.chooseInvitIcon')" ref="commonChooseIcon" width="50%" :before-close="closeChoose" :close-on-click-modal="false">
      <div class="commonChooseIcon">
        <div class="template">
          <img class="templateImg" src="./../../../../../../assets/img/inviteTemp1.png" @click="imgchoose('temp1')">
          <el-radio v-model="commonTemp" label="temp1">{{$t('configLazyLoad.channel.temp1')}}</el-radio>
        </div>
        <div class="template">
          <img class="templateImg" src="./../../../../../../assets/img/inviteTemp2.png" @click="imgchoose('temp2')">
          <el-radio v-model="commonTemp" label="temp2">{{$t('configLazyLoad.channel.temp2')}}</el-radio>
        </div>
        <div class="template">
          <img class="templateImg" src="./../../../../../../assets/img/inviteTemp3.png" @click="imgchoose('temp3')">
          <el-radio v-model="commonTemp" label="temp3">{{$t('configLazyLoad.channel.temp3')}}</el-radio>
        </div>
        <div class="template">
          <img class="templateImg" src="./../../../../../../assets/img/inviteTemp4.png" @click="imgchoose('temp4')">
          <el-radio v-model="commonTemp" label="temp4">{{$t('configLazyLoad.channel.temp4')}}</el-radio>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeChoose" class="primary_btn">{{$t('webchat.cancel')}}</el-button>
        <el-button type="primary" @click="saveCommonChoose" class="primary_btn">{{$t('configLazyLoad.channel.save')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'chooseCommonIcon',
    data () {
      return {
        dialogStatus: false,
        commonTemp: 'temp1',
        temp1Style: {
          layoutType: '1',
          backColor: '#3fb8fd',
          backImg: '',
          inviteWords: this.$t('configLazyLoad.channel.welcomeWord'),
          photourl: 'https://fs-im-kefu.7moor.com/im/486e1f70-bde0-11e7-8806-e7bf8b6e8c91/2017-12-03/1512299414438/896beb70-d81a-11e7-b6e7-9da891414b0f.png',
          Buttons: [
            {
              text: this.$t('configLazyLoad.channel.ImmeConsult'),
              color: '#fff',
              action: 'openChat'
            }, {
              text: this.$t('configLazyLoad.channel.talkLately'),
              color: '#fff',
              action: 'hideInvite'
            }
          ],
          placeholder: this.$t('configLazyLoad.channel.inputContent2')
        },
        temp2Style: {
          layoutType: '1',
          backColor: '#26c1a3',
          backImg: '',
          inviteWords: this.$t('configLazyLoad.channel.welcomeWord'),
          photourl: 'https://fs-im-kefu.7moor.com/im/486e1f70-bde0-11e7-8806-e7bf8b6e8c91/2017-12-03/1512299414438/896beb70-d81a-11e7-b6e7-9da891414b0f.png',
          Buttons: [
            {
              text: this.$t('configLazyLoad.channel.ImmeConsult'),
              color: '#fff',
              action: 'openChat'
            }, {
              text: this.$t('configLazyLoad.channel.talkLately'),
              color: '#fff',
              action: 'hideInvite'
            }
          ],
          placeholder: this.$t('configLazyLoad.channel.inputContent2')
        },
        temp3Style: {
          layoutType: '2',
          backColor: '#00cfa5',
          backImg: '',
          inviteWords: this.$t('configLazyLoad.channel.welcomeWord'),
          photourl: '',
          Buttons: [
            {
              text: this.$t('configLazyLoad.channel.ImmeConsult'),
              color: '#fff',
              action: 'openChat'
            }, {
              text: this.$t('configLazyLoad.channel.talkLately'),
              color: '#fff',
              action: 'hideInvite'
            }
          ],
          placeholder: this.$t('configLazyLoad.channel.inputContent2')
        },
        temp4Style: {
          layoutType: '2',
          backColor: '#00b954',
          backImg: '',
          inviteWords: this.$t('configLazyLoad.channel.welcomeWord'),
          photourl: '',
          Buttons: [
            {
              text: this.$t('configLazyLoad.channel.ImmeConsult'),
              color: '#fff',
              action: 'openChat'
            }, {
              text: this.$t('configLazyLoad.channel.talkLately'),
              color: '#fff',
              action: 'hideInvite'
            }
          ],
          placeholder: this.$t('configLazyLoad.channel.inputContent2')
        }
      }
    },
    props: ['chooseTemp'],
    methods: {
      beforeClose (cb) {
        console.log('beforeClose')
        this.$emit('cancel')
        cb()
        this.dialogStatus = false
      },
      imgchoose (temp) {
        this.$nextTick(() => {
          this.commonTemp = temp
        })
      },
      closeChoose () {
        this.$emit('cancel')
        this.dialogStatus = false
      },
      saveCommonChoose () {
        let tempStyle
        if (this.commonTemp === 'temp1') {
          tempStyle = this.temp1Style
        } else if (this.commonTemp === 'temp2') {
          tempStyle = this.temp2Style
        } else if (this.commonTemp === 'temp3') {
          tempStyle = this.temp3Style
        } else if (this.commonTemp === 'temp4') {
          tempStyle = this.temp4Style
        }
        this.$emit('saveChooseTemp', {inviteTemp: this.commonTemp, tempStyle: tempStyle})
        this.dialogStatus = false
      },
      deactivated () {
        this.dialogStatus = false
      }
    },
    mounted () {
      this.dialogStatus = true
    },
    beforeMount () {
      this.commonTemp = this.chooseTemp || 'temp1'
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .commonChooseIcon
    width 100%
    text-align center
    .template
      display: inline-block;
      max-width: 320px;
      width: 45%;
      height: 200px;
      text-align: center;
      margin: 0 2%;
      .templateImg
        width 100%
        max-width 320px
        cursor pointer
</style>
